<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
const kAttr = 'style="padding: 25px;"';

function click(x, y) {
  if (!window.eventSender)
    throw 'This test requires eventSender';
  eventSender.mouseMoveTo(x, y);
  eventSender.mouseDown();
  eventSender.mouseUp();
}

function clickLeftSide(selection) {
  const target = selection.document.getElementById('target');
  click(selection.computeLeft(target) -10,
        selection.computeTop(target) + target.offsetHeight / 2);
}

function clickBottomSide(selection) {
  const target = selection.document.getElementById('target');
  click(selection.computeLeft(target) + target.offsetWidth / 2,
        selection.computeTop(target) + target.offsetHeight + 10);
}

selection_test(
  [
    `<div contenteditable ${kAttr}>`,
      '<div id="target">ab</div>',
      '<table contenteditable="false"><tbody><tr>',
          '<td>\u00A0</td>',
          '<td contenteditable>CD</td>',
      '</tr></tbody></table>',
      '<div>ef</div>',
    '</div>',
  ],
  selection => clickLeftSide(selection),
  [
    `<div contenteditable ${kAttr}>`,
      '<div id="target">|ab</div>',
      '<table contenteditable="false"><tbody><tr>',
          '<td>\u00A0</td>',
          '<td contenteditable>CD</td>',
      '</tr></tbody></table>',
      '<div>ef</div>',
    '</div>',
  ],
  '1. Click left of the first paragraph');

selection_test(
  [
    `<div contenteditable ${kAttr}>`,
      '<div>ab</div>',
      '<table contenteditable="false" id="target"><tbody><tr>',
          '<td>\u00A0</td>',
          '<td contenteditable>CD</td>',
      '</tr></tbody></table>',
      '<div>ef</div>',
    '</div>',
  ],
  selection => clickLeftSide(selection),
  [
    `<div contenteditable ${kAttr}>`,
      '<div>ab</div>',
      '|<table contenteditable="false" id="target"><tbody><tr>',
          '<td>\u00A0</td>',
          '<td contenteditable>CD</td>',
      '</tr></tbody></table>',
      '<div>ef</div>',
    '</div>',
  ],
  '2. Click left of TABLE');

selection_test(
  [
    `<div contenteditable ${kAttr}>`,
      '<div>ab</div>',
      '<table contenteditable="false"><tbody><tr>',
          '<td>\u00A0</td>',
          '<td contenteditable>CD</td>',
      '</tr></tbody></table>',
      '<div id="target">ef</div>',
    '</div>',
  ],
  selection => clickLeftSide(selection),
  [
    `<div contenteditable ${kAttr}>`,
      '<div>ab</div>',
      '<table contenteditable="false"><tbody><tr>',
          '<td>\u00A0</td>',
          '<td contenteditable>CD</td>',
      '</tr></tbody></table>',
      '<div id="target">|ef</div>',
    '</div>',
  ],
  '3. Click left of second paragraph');

selection_test(
  [
    `<div contenteditable ${kAttr}>`,
      '<div>ab</div>',
      '<table contenteditable="false"><tbody><tr>',
          '<td>\u00A0</td>',
          '<td contenteditable>CD</td>',
      '</tr></tbody></table>',
      '<div id="target">ef</div>',
    '</div>',
  ],
  selection => clickBottomSide(selection),
  [
    `<div contenteditable ${kAttr}>`,
      '<div>ab</div>',
      '<table contenteditable="false"><tbody><tr>',
          '<td>\u00A0</td>',
          '<td contenteditable>CD</td>',
      '</tr></tbody></table>',
      '<div id="target">ef|</div>',
    '</div>',
  ],
  '4. Click middle of second paragraph');
</script>
